{% load static %}
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>查询用户</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/bootstrap-table/bootstrap-table.min.css' %}" rel="stylesheet">

    <link href="{% static 'css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>招聘信息</h5>

        </div>
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <!-- Example Events -->
                    <div class="example-wrap">
                        <div class="example">
                            <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                <form role="form" class="form-inline">
                                    <div class="form-group">
                                        <label for="city" class="sr-only">工作城市</label>
                                        <input type="text" placeholder="工作城市" id="city"
                                               class="form-control">
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label for="job_experience" class="sr-only">工作经验</label>
                                        <select id="job_experience" class="form-control">
                                            <option value="">工作经验要求选择</option>
                                            <option value="">不限</option>
                                            <option value="1-3">1-3年</option>
                                            <option value="3-5">3-5年</option>
                                            <option value="5-10">5-10年</option>
                                            <option value="10">10年以上</option>
                                        </select>
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label for="education" class="sr-only">学历要求</label>
                                        <select type="text" id="education"
                                                class="form-control">
                                            <option value="">学历要求选择</option>
                                            <option value="学历不限">学历不限</option>
                                            <option value="高中">高中</option>
                                            <option value="中专">中专</option>
                                            <option value="大专">大专</option>
                                            <option value="本科">本科</option>
                                            <option value="硕士">硕士</option>
                                            <option value="博士">博士</option>
                                            <option value="其他">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label for="postType" class="sr-only">岗位类型</label>
                                        <select type="text" id="postType" class="form-control">
                                            <option value="">岗位类型选择</option>
                                            <option value="java工程师">java工程师</option>
                                            <option value="Python工程师">Python工程师</option>
                                            <option value="C，C++语言工程师">C，C++语言工程师</option>
                                            <option value="算法工程师">算法工程师</option>
                                            <option value="数据分析">数据分析</option>
                                            <option value="数据挖掘">数据挖掘</option>
                                            <option value="网络工程师">网络工程师</option>
                                            <option value="软件项目经理">软件项目经理</option>
                                            <option value="算法工程师">算法工程师</option>
                                            <option value="硬件工程师">硬件工程师</option>
                                            <option value="人工智能">人工智能</option>
                                            <option value="技术支持">技术支持</option>
                                            <option value="架构师">架构师</option>
                                            <option value="大数据工程师">大数据工程师</option>
                                            <option value="新媒体技术">新媒体技术</option>
                                            <option value="UI设计师">UI设计师</option>
                                            <option value="嵌入式">嵌入式</option>
                                            <option value="网络安全">网络安全</option>
                                            <option value="前端">前端</option>
                                            <option value="移动端">移动端</option>
                                            <option value="软件测试">软件测试</option>
                                            <option value="运维工程师">运维工程师</option>
                                        </select>
                                        <button class="btn btn-default" type="button" class="form-control"
                                                onclick="btn_query_click()">查询
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <table id="exampleTableEvents" data-height="450" data-mobile-responsive="true">
                            </table>
                        </div>
                    </div>
                    <!-- End Example Events -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
<!-- 全局js -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- 自定义js -->
<script src="{% static 'js/content.js' %}"></script>


<!-- Bootstrap table -->
<script src="{% static 'js/plugins/bootstrap-table/bootstrap-table.min.js' %}"></script>
{#<script src="{% static 'js/plugins/bootstrap-table/bootstrap-table-mobile.min.js' %}"></script>#}
<script src="{% static 'js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js' %}"></script>

<!-- Peity -->
<script type="text/javascript">

    $(function () {
        $('#exampleTableEvents').bootstrapTable({
            /* url: "queryDev.json", */
            url: "/getJobsInfo/",
            method: "get",
            queryParamsType: 'application/json',  // 指定请求参数的类型为 JSON
            search: false,
            cache: false,
            clickToSelect: true,
            onlyInfoPagination: false,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            sidePagination: 'server',
            iconSize: 'outline',
            idField: "devId",
            toolbar: '#exampleTableEventsToolbar',
            columns: [{
                field: 'state',
                radio: true,
            }, {
                field: 'job_title',
                title: '招聘名称',
//	                    visible: false,
                align: "center",
                halign: "center"
            }, {
                field: 'job_area',
                title: '地区',
                align: "center",
                halign: "center"
            }, {
                field: 'salary_bot',
                title: '最低薪资',
                align: "center",
                halign: "center",
                formatter: function (value, row, index) {
                    return value + "元";
                }
            }, {
                field: 'salary_top',
                title: '最高薪资',
                align: "center",
                halign: "center",
                formatter: function (value, row, index) {
                    return value + "元";
                }
            }, {
                field: 'year',
                title: '工作经验年限',
                align: "center",
                halign: "center"
            }, {
                field: 'education',
                title: '学历要求',
                align: "center",
                halign: "center"
            }, {
                field: 'company_title',
                title: '公司名称',
                align: "center",
                halign: "center",

            }, {
                field: 'company_info',
                title: '公司规模',
                align: "center",
                halign: "center",
            }, {
                field: 'skill',
                title: '工作职责',
                align: "center",
                halign: "center"
            }, {
                field: 'publis_name',
                title: '发布者',
                align: "center",
                halign: "center"
            }, {
                field: 'welfare',
                title: '福利待遇',
                align: "center",
                halign: "center"
            }],
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                let temp = {
                    pageNumber: params.pageNumber, //页码
                    pageSize: params.pageSize,  // 数据条数
                    city: $("#city").val(),
                    job_experience: $("#job_experience").val(),
                    education: $("#education").val(),
                    post_type: $("#postType").val()
                };
                console.log(temp);
                return temp;
            },
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            }
        });
    });

    function btn_query_click() {
        $('#exampleTableEvents').bootstrapTable('selectPage', 1);
        $('#exampleTableEvents').bootstrapTable('refresh');
    }


</script>
</body>
</html>